<template>
  <a-col
    :md="12"
    :sm="24"
  >
    <a-form
      :model="formState"
      class="container-form"
      layout="inline"
      @keyup.enter.native="handleSearch({ imei: props.activeImei })"
      @keyup.esc.native="handleReset({ imei: props.activeImei })"
    >
      <a-form-item label="表具编号">
        <a-input
          v-model:value="formState.meterId"
          allowClear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button
            :loading="searchLoading"
            type="primary"
            @click="handleSearch({ imei: props.activeImei })"
          >
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button
            :loading="resetLoading"
            @click="handleReset({ imei: props.activeImei })"
          >
            <template #icon>
              <RedoOutlined />
            </template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-row class="container-operate">
      <a-button
        type="primary"
        @click="handleAdd"
      >
        <template #icon>
          <PlusOutlined />
        </template>
        新增
      </a-button>
    </a-row>

    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :pagination="pagination"
      :scroll="{ x: 'max-content', y: tableScrollY }"
      bordered
      class="container-table right-table"
      rowKey="id"
      @change="tableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button
            type="link"
            @click="handleEdit(record)"
          >
            <template #icon>
              <EditOutlined />
            </template>
            编辑
          </a-button>
          <a-divider type="vertical" />
          <a-popconfirm
            placement="left"
            cancel-text="取消"
            ok-text="确认"
            title="确认删除？"
            @confirm="handleDelete(record)"
          >
            <a-button
              danger
              type="link"
            >
              <template #icon>
                <DeleteOutlined />
              </template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </a-col>

  <MeterModal
    ref="modal"
    @modalOk="getList(props.activeImei)"
  />
</template>
<script setup>
import { useFormSearch, useTableList } from '@/hooks/index.js'
import MeterModal from './src/meterModal.vue'
import { message } from 'ant-design-vue'
import Service from '@/utils/service.js'

const columns = [
  {
    title: '表具编号',
    align: 'center',
    dataIndex: 'meterId',
  },
  {
    title: '网关号',
    align: 'center',
    dataIndex: 'imei',
  },
  {
    title: '总用气量',
    align: 'center',
    dataIndex: 'totalUseGas',
    width: 60,
  },
  {
    title: '从机号',
    align: 'center',
    dataIndex: 'slaveId',
    width: 60,
  },
  {
    title: '更新时间',
    align: 'center',
    dataIndex: 'updatedAt',
  },
  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'createdAt',
  },
  {
    title: '操作',
    align: 'center',
    key: 'action',
    fixed: 'right',
    width: 180,
  },
]

const { loading, dataSource, pagination, tableScrollY, getList, tableChange } = useTableList('/meter/page', {
  tableSelector: '.right-table',
})
const { formState, searchLoading, resetLoading, handleSearch, handleReset } = useFormSearch({ meterId: '' }, getList)

const props = defineProps({
  activeImei: {
    type: String,
    default: '',
  },
})

watch(
  () => props.activeImei,
  imei => {
    if (imei) {
      getList({ imei })
    }
  }
)

const modal = ref()
const handleAdd = () => {
  modal.value.handleAdd(props.activeImei)
}
const handleEdit = record => {
  const { id, imei, meterId, slaveId } = record
  modal.value.handleEdit({ id, imei, meterId, slaveId })
}

const handleDelete = record => {
  return Service.deleteAction('/meter/remove', {
    id: record.id,
  }).then(({ code, msg }) => {
    if (code === 200) {
      getList({ imei: props.activeImei })
      message.success('删除成功！')
    } else {
      message.error(msg)
    }
  })
}
</script>
<style lang="scss" scoped></style>
